
<script setup lang="ts">
import { shallowRef, onMounted, computed } from "vue";
import EduMenuItem from "./EduMenuItem.vue";
import { useDashboard } from '@/store'
import { UserApi } from "@/api";
import arrayToTree from "@/utils/arrayToTree";
const dashboard = useDashboard()

const userFuncs = shallowRef<Array<Vm.Func>>([]);
const menuData = computed<Array<Vm.FuncNode>>(() =>
  arrayToTree(userFuncs.value, "func_id", "func_fid")
);
onMounted(async () => (userFuncs.value = await UserApi.getMenu()));
</script>
<template>
  <el-menu :default-active="dashboard.activeFunc" @select="index => dashboard.addTab(index)">
    <EduMenuItem :items="menuData"></EduMenuItem>
  </el-menu>
</template>

<style scoped lang="stylus">

</style>
